<template>
	<ve-ring :data="data" :settings="settings" :width="width" :height="height" :extend="{ ...defaultExtend, ...extend }"></ve-ring>
</template>

<script>
//环形图  legend竖直排列
export default {
	props: {
		//图表数据
		data: {
			type: Object,
			default: () => {
				return {
					columns: [],
					rows: [],
				};
			},
		},
		//图表扩展属性
		extend: {
			type: Object,
			default: () => {
				return {
					//默认图表的颜色
					//color: ['pink', 'skyblue', 'gold', 'yellow'],
				};
			},
		},
		//图表的宽度
		width: {
			type: String,
			default: '100%',
		},
		//图表的高度
		height: {
			type: String,
			default: '300px',
		},

		//legend显示数量限制
		legendLimit: {
			type: Number,
			default: 0,
		},
		//饼图半径
		radius: {
			type: Array,
			default: () => [120, 90],
		},
	},
	data() {
		this.defaultExtend = {
			title: {
				x: '155px',
				y: 'center',
				text: '总数',
				textAlign: 'center',
				textStyle: {
					fontSize: 16,
					lineHeight: 18,
					color: '#999',
					fontWeight: 'normal',
				},
				subtext: '720',
				subtextStyle: {
					fontSize: 20,
					color: '#333',
					fontWeight: 'bold',
				},
			},
			legend: {
				right: '40px',
				top: 'center',
				orient: 'vertical',
				formatter: `{name}     18%   347人`,
				/*
					formatter(name) {
						return name + '  ' + props.chartData.find(item => item.name == name).value + props.unit;
					},
				*/
				itemGap: 24,
			},
			grid: {
				top: '14%',
				left: '3%',
				right: '3%',
				bottom: '4%',
			},
			series: {
				center: ['160px', 'center'],
			},
		};
		return {
			settings: {
				offsetY: parseInt(this.height) / 2,
				label: {
					show: false,
				},
				labelLine: {
					show: false,
				},
			},
		};
	},
};
</script>

<style lang="scss" scoped></style>
